<template>
	<gui-page :customHeader="true">
		<view slot="gBody">
			<view style="padding:50rpx;">
				<view class="gui-flex gui-rows gui-justify-content-center">
					<image :src="app_logo ? imgServer+app_logo : '../../static/logo.png'" mode="widthFix" style="width: 200rpx;"></image>
				</view>
				<view style="text-align: center;margin-top: 30rpx;">找回密码</view>
				<view style="margin-top:80rpx;">
					<form @submit="submit">
						<view>
							<text class="gui-text-small gui-color-gray">手机号</text>
						</view>
						<view class="gui-border-b">
							<input type="number" class="gui-form-input" v-model="phoneno" 
							name="phoneno" placeholder="您的手机号" />
						</view>
						<view class="gui-margin-top">
							<text class="gui-text-small gui-color-gray">新密码</text>
						</view>
						<view class="gui-border-b">
							<input type="password" class="gui-form-input" 
							name="password" placeholder="请输入新密码" />
						</view>
						<view class="gui-margin-top">
							<text class="gui-text-small gui-color-gray">短信验证码</text>
						</view>
						<view class="gui-border-b gui-flex gui-rows gui-nowrap gui-align-items-center">
							<input type="number" class="gui-form-input" 
							style="width:200rpx; flex:1;" 
							name="pwd" placeholder="短信验证码" />
							<text class="sendmsg gui-block-text gui-border-l gui-text-right" @tap="getVCode">{{vcodeBtnName}}</text>
						</view>
						<view style="margin-top:38rpx;">
							<button type="default" class="gui-button" formType="submit" 
							style="border-radius:20rpx;background-color: #f08519;">
								<text class="gui-color-white gui-button-text">提交</text>
							</button>
						</view>
					</form>
				</view>
			</view>
		</view>
	</gui-page>
</template>

<script>
var graceChecker = require("@/lizhili/js/checker.js");
export default {
	data() {
		return {
			fid: 0,
			phoneno        : '',
			vcodeBtnName   : "发送验证码",
			countNum       : 120,
			countDownTimer : null,
			imgServer:'',
			app_logo:''
		};
	},
	onLoad(e) {
		this.imgServer=uni.common.imgServer
		if (e.fid) {
			this.fid = e.fid;
		}
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'get_shop_info'
			},
			false,
			res => {
				if (res.code == 1) {
					this.app_logo = res.data.app_logo
				} 
			},
			e => {
				console.log(e);
			}
		);
	},
	onShow() {
		const token = uni.getStorageSync('token');
		if (token) {
			uni.common.post(
				uni.common.apiServer + 'index',
				{
					type: 'get_my_check',
				},
				true,
				res => {
					if (res.code == 1) {
						try {
							uni.setStorageSync('token', res.token);
							uni.setStorageSync('uid', res.uid);
							uni.setStorageSync('user_no', res.user_no);
						} catch (e) {
							// error
						}
						uni.switchTab({
							url: '../index/index'
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		}
	},
	methods: {
		getVCode    : function(){
			var myreg=/^[1][0-9]{10}$/;
			if (!myreg.test(this.phoneno)){
				uni.showToast({ title: '请正确填写手机号码', icon : "none"});
				return false;
			}
			if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送'){return ;}
			this.vcodeBtnName =  "发送中...";
			uni.common.post(
				uni.common.apiServer + 'index',
				{
					type: 'get_login_yzm',
					phone:this.phoneno
				},
				false,
				res => {
					if (res.code == 1) {
						uni.showToast({ title: '短信已发送，请注意查收', icon : "none"});
						this.countNum = 120;
						this.countDownTimer = setInterval(function(){this.countDown();}.bind(this), 1000);
					} else{
						uni.showToast({ title: '短信发送失败，请重试！', icon : "none"});
						this.vcodeBtnName='重新发送'
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		countDown   : function(){
			if (this.countNum < 1){
			  clearInterval(this.countDownTimer);
			  this.vcodeBtnName = "重新发送";
			  return ;
			}
			this.countNum--;
			this.vcodeBtnName = this.countNum + '秒重发';
		},
		submit : function(e){
			var formData = e.detail.value;
			var rule = [
				{name:"phoneno", checkType : "phoneno", checkRule:"", errorMsg:"手机号码有误"},
				{name:"password", checkType : "string", checkRule:"6,12", errorMsg:"密码至少6个字符"},
				{name:"pwd", checkType : "string", checkRule:"4,6", errorMsg:"短信验证码错误"}
			];
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){ 
				uni.common.post(
					uni.common.apiServer + 'index',
					{
						type: 'phone_login_zhao',
						data:JSON.stringify(formData),
					},
					false,
					res => {
						if (res.code == 1) {
							try {
							    uni.setStorageSync('token', res.data);
								uni.setStorageSync('uid', res.uid);
								uni.setStorageSync('user_no', res.user_no);
							} catch (e) {
							    // error
							}
							
							uni.switchTab({
							    url: '../index/index'
							});
							
						} else{
							uni.showToast({ title: res.message, icon : "none"});
						}
					},
					e => {
						console.log(e);
					}
				);

			}else{
				uni.showToast({ title:graceChecker.error, icon: "none" });
			}
		},
	}
};
</script>

<style>
.login-logo{width:180rpx; height:180rpx; font-size:80rpx; text-align:center; line-height:120rpx; padding:30rpx; border-radius:18rpx;}
.other-login-icons{width:88rpx; height:88rpx; text-align:center; font-size:70rpx; margin:20rpx;}
.sendmsg{height:30rpx; width:200rpx; font-size:24rpx; line-height:30rpx;}
</style>
